<template>
  <el-table
    class-name="analysis-table"
    :data="tableData"
    style="width: 100%"
    row-key="knowledge_id"
  >
    <el-table-column prop="knowledge_name" label="知识点">
      <template #default="scope">
        <div class="name-box flex-center">
          {{ scope.row.knowledge_name }}
          <div class="question-list flex" v-if="scope.row.serial_numbers">
            <div
              class="question-item"
              v-for="(num, index) in scope.row.serial_numbers"
              :key="index"
            >
              {{ num }}
            </div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="average_accuracy" label="平均正确率">
      <template #default="scope"
        >{{ (scope.row.average_accuracy * 100).toFixed(1) }}%
      </template>
    </el-table-column>
    <el-table-column prop="class_averages" label="正确率排名">
      <template #header> 正确率<sup>排名</sup> </template>
      <el-table-column
        v-for="(classItem, index) in classColumns"
        :key="index"
        :label="classItem.class_name"
        :prop="classItem.class_id"
      >
        <template #default="scope">
          {{
            (scope.row[classItem.class_id].average_accuracy * 100).toFixed(0)
          }}%
          <sup>{{ scope.row[classItem.class_id].rank }}</sup>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import { getKnowledgeReport } from '@/apis/assignment/index'
const props = defineProps({
  taskId: {
    required: true
  }
})

const tableData = ref([])
const classColumns = ref([])

/**
 * 知识点对比分析
 */
const getKnowledgeReportInfo = async () => {
  const res = await getKnowledgeReport({
    task_id: props.taskId
  })
  tableData.value = res.data.map(question => {
    let item = {
      ...question
    }
    question.class_averages.forEach(child => {
      if (
        !classColumns.value.find(param => param.class_id === child.class_id)
      ) {
        classColumns.value.push({
          class_id: child.class_id,
          class_name: child.class_name
        })
      }
      item[child.class_id] = child
    })
    return item
  })
}

const initData = () => {
  getKnowledgeReportInfo()
}

initData()
</script>

<style lang="less" scoped>
.analysis-table {
  .name-box {
    gap: 10px;
    .question-list {
      flex-wrap: wrap;
      gap: 10px;
      .question-item {
        border: 1px solid #b7b8bb;
        width: 20px;
        text-align: center;
        line-height: 20px;
      }
    }
  }
  :deep(.cell) {
    text-align: center !important;
  }
}
</style>
